<template>
	<view class="box">

		<view class="top">
			<view class="header-box">
				<head-left-nav text-content="首页" :title-color="'#303133'" :is-back-show="false"></head-left-nav>
			</view>
			
			<view style="position: absolute;top: 200rpx;width: 100%;">
				<view class="top_box flex fjb alignC">
					<view class="left_text">
						<view class="title">宝鸡市健康传播促进会</view>
						<view class="subtitle">我健康，我正在传播健康的路上</view>
					</view>
					<view class="right_img">
						<image src="/static/logo.png" mode="" style="width: 124rpx;height: 124rpx;"></image>
					</view>
				</view>
				
				<!-- <view class="search">
					<u-search shape="round" mode="none" placeholder="请输入想要查找的内容" animation="false" disabled @click="gotoSearch" height="80"
					bg-color="#FFF" color="#ccc"></u-search>
				</view> -->
				<view class="content" v-show="!shopShow">
					<!-- 轮播图开始 -->
					<u-swiper class="swiper" :list="bannerList" name="url" border-radius="16" height="258" width="686"
						img-mode="aspectFill"></u-swiper>
					<!-- 轮播图结束 -->
					<view class="login-tip" v-show="isLogin" @click="toPage('/subpkg/login/login')">
						<view>
							<u-icon name="volume-up" style="margin-right: 6rpx;"></u-icon>
							<text>登录后，享受更多服务</text>
						</view>
						<view>
							<text style="margin-right: 6rpx;">去登录</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="list_box common_box" style="margin: 32rpx 0;">
						<view class="topheader"></view>
						<view class="item item1 flex alignC" @click="toPage('/subpkg/medicalPolicy/medicalPolicy')">
							<view class="text">医保政策动态</view>
						</view>
						<view class="item item2 flex alignC" @click="toPage('/subpkg/marketDynamics/marketDynamics')">
							<view class="text">市场兼管动态</view>
						</view>
						<view class="item item3 flex alignC" @click="toPage('/subpkg/chineseMedicine/chineseMedicine')">
							<view class="text">中医讲堂</view>
						</view>
						<view class="item item4 flex alignC" @click="toPage('/subpkg/safeMedication/safeMedication')">
							<view class="text">安全用药</view>
						</view>
					</view>
					<!-- 科普视频 -->
					<view class="common_box">
						<view class="topheader" @click="toPage('/subpkg/video/video')"></view>
						
						<view class="nav-bar flex fjb alignC" >
							<view class="flex ">
								<text>科普视频</text>
							</view>
							<view class="flex alignC">
								<span style="font-size: 24rpx;color: #979797;">查看更多</span>	<u-icon name="arrow-right" size="24" color="#979797"></u-icon>
							</view>
						</view>
						
						<u-tabs :list="deptList" name="label" gutter="16" :current="current" @change="changeTabs1"
							bar-height="8" bar-width="40" active-color="#3FBEBB" inactive-color="#686868"></u-tabs>

						<view class="card_list" v-if="videoList.length">
							<view class="card_item flex" v-for="(item, index) in videoList" :key="item.subjectCode">
								<!-- uploadType:1  视频链接，展示视频封面 -->
								<view v-if="item.uploadType == 1" class="right">
									<image :src="item.videoCover[0].url" mode=""></image>
								</view>
								<view v-else class="right">
									<video :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" v-if="item.videoUrl"
										:show-center-play-btn="false" :src="item.videoUrl"></video>
								</view>
								<view class="left flex fjb flexColumn">
									<view>
										<view class="title">{{ item.topicTitle }}</view>
										<view class="username">{{ item.doctorName }}</view>
									</view>
									<view class="flex fjb alignC">
										<view class="cate">类别：{{ item.categoryName }}</view>
										<view class="viewBtn flex fcenter" @click="toVideoDetail(item.subjectCode)">立即查看</view>
									</view>
								</view>
							</view>
						</view>
						<view class="empty_box" v-else>
							<image src="/static/empty.png" mode=""></image>
							<text>暂无内容</text>
						</view>
					</view>
					<!-- 科普文章 -->
					<view class="common_box">
						<view class="topheader" @click="toPage('/subpkg/article/article')"></view>
						<view class="nav-bar flex fjb alignC" >
							<view class="flex ">
								<text>科普文章</text>
							</view>
							<view class="flex alignC">
								<span style="font-size: 24rpx;color: #979797;">查看更多</span>	<u-icon name="arrow-right" size="24" color="#979797"></u-icon>
							</view>
						</view>
						<view class="card_list">
							<view class="card_item flex">
								<view class="right">
									<image :src="articleObj.coverImgs[0].url" mode=""></image>
								</view>
								<view class="left flex fjb flexColumn">
									<view class="title">{{ articleObj.title }}</view>
									<view class="flex alignC" style="justify-content: flex-end;" @click="toDetail(articleObj)">
										<view class="viewBtn flex fcenter">立即查看</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 健康传播大使 -->
					<view class="common_box">
						<view class="topheader" @click="toPage('/subpkg/healthAmbassador/healthAmbassador')"></view>
						<view class="nav-bar flex fjb alignC" >
							<view class="flex ">
								<text>健康传播大使</text>
							</view>
							<view class="flex alignC">
								<span style="font-size: 24rpx;color: #979797;">查看更多</span>	<u-icon name="arrow-right" size="24" color="#979797"></u-icon>
							</view>
						</view>
						
						<u-tabs :list="deptList" name="label" gutter="16" :current="current2" @change="changeTabs2"
							bar-height="8" bar-width="40" active-color="#3FBEBB" inactive-color="#686868"></u-tabs>
							
						<view class="cate_list flex fjb">
							<view class="cate_user flex flexColumn fcenter" @click="toPage(`/subpkg/doctorIntro/doctorIntro?id=${item.id}`)"
								v-for="(item, index) in doctorList" :key="item.id">
								<image class="cate_icon" :src="item.image ? item.image : '/static/logo.png'" mode=""></image>
								<view class="cate_user_name">{{ item.name }} {{ item.professionalTitle }}</view>
								<view class="cate_user_addr line1">{{ item.hospital }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		recordHomePageApi,
		recordClickHomePageModuleApi
	} from '@/common/api/screenApi.js'
	import {
		getClassApi,
		getGoodsListApi,
		addAttentionApi,
		delAttentionApi,
		getGroupGoodsListApi
	} from '@/common/api/goodsApi.js'
	import {
		getBannerApi,
		getProjectCodeApi
	} from '@/common/api/userInfoApi.js'
	import {
		getShopListApi
	} from '@/common/api/Salesman.js'
	import {
		queryListByPageApi,
		queryCategoryListApi
	} from "@/common/api/articleApi.js"
	import {
		getVideoListApi,
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		getDoctorListApi
	} from '@/common/api/doctorApi'
	import { getDictListApi } from '@/common/api/dictApi.js'
	import { getCateVideoListApi } from '@/common/api/lectureApi.js'
	import {
		getYMD,
		handleDate,
		mapSalesmanList
	} from '@/utils/filter.js'
	import headLeftNav from '@/components/HeadLeftNav.vue';
	const app = getApp()
	export default {
		components: {
			headLeftNav
		},
		data() {
			return {
				articleObj: {},
				deptList: [],
				tabsList: [],
				current: 0,
				current2: 0,
				capsule: {},
				GoodsClass: [],
				bannerList: [],
				active: 0,
				list: [],
				GoodsList: [],
				total: 0,
				pageNum: 1,
				throttle: false,
				ShopList: [],
				shopTotal: 0,
				ShopPageNum: 1,
				shopShow: false,
				DateObj: {},
				isShow: true,
				categoryIds: [-1,-2],
				isLogin: false,
				department: '',
				doctorList: [],
				dictObj: {},
				videoList: [],
				categoryCode: ''
			};
		},
		computed: {
			...mapState('user', ['ylProjectCode', 'ylToken', 'ylUserInfo', 'ylEnterprise']),
			showList() {
				return this.GoodsList.length ? true : false
			},
			ylProject() {
				return uni.getStorageSync('ylProject')
			}
		},
		methods: {
			...mapMutations('user', ['MusetProjectCode', 'MusetEnterprise']),
			// 获取视频分类的dictValue  
			async getDictObj(name) {
				let res = await getDictListApi('videoType')
				console.log(res)
				if(res.status == 200) {
					let dictList = res.data[0].dictList
					this.dictObj = dictList.filter(item=> item.dictValue == name)
				}
			},
			// 根据视频分类获取科普视频
			async listByPage() {
				console.log(this.dictObj[0],'this.dictObj.dictKey')
				let params = {
					pageNum: 1,
					pageSize: 2,
					uploadClassify: this.dictObj[0].dictKey,
					categoryCode: this.categoryCode,
					doctorName: '',
					topicTitle: ''
				}
				const res = await getCateVideoListApi(params)
				if (res.status == 200) {
					this.videoList.push(...res.data.records)
				}
			},
			toVideoDetail(subjectCode) {
				wx.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?subjectCode=${subjectCode}`
				})
			},
			// 科室分类
			async getdeptList() {
				const r = await getdeptListApi()
				this.deptList = r.data
				this.department = this.deptList[0].label
				console.log(this.deptList,'this.deptList')
				
				// this.categoryCode = this.deptList[0].id
			},
			// 科普文章
			async getCateId() {
				let res = await queryCategoryListApi('科普文章')
				console.log(res)
				if(res.status == 200) {
					let categoryId = res.data.records[0].id
					let params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						categoryId: categoryId,
						projectCode: this.ylProjectCode
					}
					queryListByPageApi(params).then((res) => {
						if (res.status == 200) {
							if(res.data.records.length) {
								this.articleObj = res.data.records[0]
							}
						}
					})
					
				}
			},
			gotoSearch() {
				// 跳转到分包中的搜索页面
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			changeTabs1(index) {
				this.current = index;
				this.categoryCode = this.deptList[index].value
				console.log(index,' ====')
				console.log(this.categoryCode,'this.categoryCode====')
				this.videoList = []
				this.listByPage()
			},
			changeTabs2(index) {
				this.current2 = index;
				this.department = this.deptList[index].label
				console.log(this.department,'this.department')
				this.doctorList = []
				this.getDoctorList()
			},
			// 获取医生列表
			async getDoctorList() {
				const res = await getDoctorListApi({
					name: '',
					pageNum: 1,
					pageSize: 10,
					hospital: '',
					department: this.department
				})
				if(res.data.records.length > 3) {
					this.doctorList.push(...res.data.records.slice(0, 3))
				} else {
					this.doctorList.push(...res.data.records)
				}
				
			},
			async getGoodsClass() {
				const res = await getClassApi(this.ylEnterprise.enterpriseCode, 1)
				if (res.status === 200) {
					this.GoodsClass = res.data.filter(item => !item.isShow)
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getCommonGoodsList() {
				const res = await getGoodsListApi({
					// salesType: '1',
					// createEnd: this.DateObj.createEnd,
					// createStart: this.DateObj.createStart,
					// appRecommend: 0,
					pageNum: this.pageNum,
					pageSize: 10,
					enterpriseCode: this.ylEnterprise.enterpriseCode,
					type: "1",
					categoryIds: this.categoryIds
				})
				if (res.status === 200) {
					this.list.push(...res.data.records)
					this.total = res.data.total
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getBanner(callback) {
				console.log(this.ylEnterprise.enterpriseCode)
				const res = await getBannerApi(this.ylEnterprise.enterpriseCode)
				if (res.status === 200) {
					this.bannerList = res.data
				}
				callback && callback()
			},
			async getProjectCode() {
				const res = await getProjectCodeApi()
				console.log(res, 'MusetProjectCode')
				this.MusetProjectCode(res)
			},
			async changeNav(index) {
				if (this.active === index) return
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.active = index
				if (this.active === 0) {
					this.categoryIds = [-1,-2]
					this.DateObj = {}
				} else if (this.active === 1) {
					this.categoryIds = [-3,-4,-5]
					this.DateObj = handleDate()
				}
				// await this.getCommonGoodsList()
			},
			async getShopList() {
				const res = await getShopListApi()
				this.ShopList.push(...res.data)
				this.shopTotal = res.data.total
				if (!this.ylEnterprise.enterpriseCode) {
					this.MusetEnterprise(this.ShopList[0])
				}
			},
			handleShop(item) {
				this.MusetEnterprise(item)
				this.refresh()
			},
			async refresh() {
				Object.assign(this.$data, this.$options.data())
				//右上角胶囊高度
				this.capsule = wx.getMenuButtonBoundingClientRect()
				await this.getShopList()
				// await this.getGoodsClass()
				// await this.getCommonGoodsList()
				await this.getBanner(uni.stopPullDownRefresh)
			},
			async handleAttention(item, index) {
				if (item.isWatch) {
					//点击取消
					this.ShopList[index].isWatch = 0
					const res = await delAttentionApi(item.enterpriseCode)
					if (res.status === 200) {
						uni.$showMsg('已取消关注')
					} else {
						uni.$showMsg(res.message)
					}
				} else {
					//点击新增关注门店
					this.ShopList[index].isWatch = 1
					const res = await addAttentionApi(item.enterpriseCode)
					if (res.status === 200) {
						uni.$showMsg('关注店铺成功', 'success')
					} else {
						uni.$showMsg(res.message)
					}
				}
			},
			async handleClick(item) {
				uni.$showMsg('敬请期待')
				console.log(item,)
				// return
				// if (item.commodityIdNames) {
				// 	uni.navigateTo({
				// 		url: `/subPackages/cateList/cateList?code=${item.commodityIdNames[0].productCode}&title=${item.title}`
				// 	})
				// } else {
					// uni.$showMsg('功能正在开发中, 敬请期待')
				// if(item.title == '社区活动') {
				// 	uni.navigateTo({
				// 		url: '/subPackages/communityActivities/communityActivities'
				// 	})
				// } else if(item.title == '健康咨询') {
				// 	uni.navigateTo({
				// 		url: '/subPackages/healthConsultation/healthConsultation'
				// 	})
				// } else if(item.title == '智慧医疗') {
				// 	uni.navigateTo({
				// 		url: '/subPackages/smartHealthcare/smartHealthcare'
				// 	})
				// } else if(item.title == '福利商城') {
				// 	uni.navigateTo({
				// 		url: '/subPackages/welfareMall/welfareMall'
				// 	})
				// }
				// }
			},
			handleTuangou() {
				uni.navigateTo({
					url: `/subpkg/campaign/campaign`
				})
			},
			async toGoodsDetail(uniqueId, activityCode, boolean) {
				if (!boolean) return uni.$showMsg('已售罄,去看看其他商品吧')
				uni.setStorageSync('activityCode', activityCode)
				uni.navigateTo({
					url: `/subpkg/goodsDetail/goodsDetail?uniqueId=${uniqueId}`
				})
			},
			tomarketingCampaign() {
				uni.navigateTo({
					url: '/subpkg/campaign/campaign'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/subpkg/detail/detail?item=${encodeURIComponent(JSON.stringify(item))}&title=${item.categoryName}`
				})
			},
			toProductDetail(item){
				console.log('list',this.list)
				console.log('item',item)
				uni.navigateTo({
					url: `/subpkg/detailByType/detailByWorker?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			toOrder(item){
				uni.navigateTo({
					url: `/subpkg/workOrder/confirmWorkOrder?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			// await this.getCommonGoodsList()

		},
		async onShow() {
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
				// await this.getDictObj('中医讲堂')
			}
			
			
		},
		async onLoad(option) {
			console.log(option)
			//右上角胶囊高度
			this.capsule = wx.getMenuButtonBoundingClientRect()
			option.spreadCode && uni.setStorageSync('spreadCode', option.spreadCode)
			// app.loginCallback = flag => { // 监听自定义回调函数执行
			// 	if (flag) {
			// 		api.post('/xxxxxxxxxxxxx').then((res) => { // post api
			// 			// do something
			// 		});
			// 	}
			// }
			if (!this.ylProjectCode) {
				await this.getProjectCode()
			}
			await this.getShopList()
			// this.getGoodsClass()
			await this.getBanner()
			await this.getCateId()
			await this.getdeptList()
			await this.getDoctorList()
			await this.getDictObj('科普视频')
			await this.changeTabs1(0)
			// const sysInfo = uni.getSystemInfoSync()
			// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			// this.wh = sysInfo.windowHeight - 50
			// this.getCommonGoodsList()
			
			const res = await recordHomePageApi('dsyl')
			console.log('访问首页埋点',res)
		},
		async onPullDownRefresh() {
			this.refresh()
			if(!uni.getStorageSync('ylToken')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		onShareAppMessage() {
			//0:正式版,1:开发版,2:体验版
			return {
				title: "十分便民",
				imageUrl: 'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/yjc/logo.png',
				path: `/pages/home/home?spreadCode=${this.ylUserInfo.username}`,
			}
		},
		onShareTimeline() {
			return {
				title: "十分便民",
				imageUrl: 'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/yjc/logo.png'
			}
		}

	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.empty_box {
		height: 20vh;
	}
	.header-box {
		background: linear-gradient(180deg, #D5F0F0 0%, #F8F8F8 100%);
		width: 100%;
		height: 654rpx;
		background-size: 100% 100%;
	}
	.common_box{
		position: relative;
		background: #fff;
		border-radius: 32rpx;
		margin-bottom: 32rpx;
		.topheader{
			position: absolute;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			width: 100%;
			height: 106rpx;
			opacity: 0.4;
			background: linear-gradient(180deg, rgba(48,202,181,0.25) 0%, rgba(255,255,255,0) 100%);
		}
		.cate_icon{
			width: 120rpx;height: 120rpx;
			margin-bottom: 10rpx;
			border-radius: 50%;
		}
	}
	.cate_box{
		margin: 0 32rpx;
		.cate_item{
			font-size: 22rpx;
			color: #4D4D4D;
			
		}
		.active_cate{
			color: #3FBEBB;
		}
	}
	.cate_list{
		margin: 32rpx 28rpx;
		padding-bottom: 48rpx;
		.cate_user{
			flex: 1;
			.cate_user_name{
				font-weight: bold;
				font-size: 26rpx;
				color: #202020;
			}
			.cate_user_addr{
				font-size: 24rpx;
				color: #898989;
				margin-top: 6rpx;
			}
		}
		
	}
	.box {
		.top_box{
			margin: 0 32rpx 32rpx;
			.left_text{
				.title{
					font-weight: 600;font-size: 40rpx;color: #3A3A3A;
				}
				.subtitle{
					font-size: 28rpx;color: #545454;
					margin-top: 10rpx;
					letter-spacing: 2px;
				}
			}
		}
		.card-bot-right{
			height: 70rpx;
		}
		.list_box {
			margin: 32rpx;
			padding: 30rpx;
			display: grid;
			grid-template-columns: auto auto; /* 两列 */
			grid-template-rows: auto auto; /* 两行 */
			gap: 24rpx; /* 设置行间和列间距为10px */
			// padding: 10rpx;
			.item1{
				background: url('/static/card_bg1.png') no-repeat;
				z-index: 999;
			}
			.item2{
				background: url('/static/card_bg2.png') no-repeat;
				z-index: 999;
			}
			.item3{
				background: url('/static/card_bg3.png') no-repeat;
			}
			.item4{
				background: url('/static/card_bg4.png') no-repeat;
			}
			.item {
				background-size: 100% 100%;
				height: 128rpx;
				border-radius: 16rpx;
				.text{
					color: #000;
					font-size: 28rpx;
					width: 200rpx;
					padding-left: 16rpx;
				}
			}
		}
		.top {
			width: 100%;
			height: 621rpx;
			background: linear-gradient( 180deg, #007FEE 0%, #FFFFFF 100%);;
			
			.content {
				padding: 0 32rpx;
				// background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				padding: 32rpx;
				margin-top: -30rpx;
				.swiper {
					/deep/ .u-swiper-wrap {
						margin-bottom: 32rpx;
					}
					image {
						border-radius: 24rpx;
						width: 100%;
						height: 344rpx !important;
					}
				}

				.scroll-view_H {
					width: 100%;
					display: flex;
					/* 超出部分隐藏 */
					overflow: hidden;
					justify-content: center;
					/* 文本不换行 */
					white-space: nowrap;
					background-color: #fff;
					padding: 16rpx 0;
					border-radius: 16rpx;
					margin-bottom: 32rpx;

					/* IE 10+ */
				}

				.nav-bar {
					font-size: 34rpx;
					color: #303133;
					height: 112rpx;
					padding: 32rpx;
				}
			}
		}
	}
	
	.card_list{
		.card_item{
			padding: 32rpx;
			border-bottom: 1rpx solid #F8F8F8;
			.left{
				flex: 1;
				.title{
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
				.username{
					margin-top: 14rpx;
					font-size: 24rpx;
					color: #9A9A9A;
				}
				.cate{
					font-size: 20rpx;
					color: #8F8F8F;
				}
				.viewBtn{
					width: 160rpx;
					height: 58rpx;
					background: #3FBEBB;
					color: #fff;
					font-size: 24rpx;
					border-radius: 37rpx;
				}
			}
			.right{
				width: 242rpx;
				height: 180rpx;
				margin-right: 32rpx;
				image{
					border-radius: 16rpx;
					width: 100%;
					height: 100%;
				}
				video{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
		}
	}
	.enter_btn{
		border-radius: 50rpx;
		width: 232rpx;
		height: 70rpx;
		background: #F34B47;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 50rpx 0 20rpx;
	}
	.news_list{
		.news_item{
			height: 87rpx;
		}
		.news_item:first-child .news_index{
			color: #FF6023;
		}
		.news_item:nth-child(2) .news_index{
			color: #FF8D23;
		}
		.news_item:nth-child(3) .news_index{
			color: #FFCF23;
		}
		.news_index{
			color: #999999;
			margin-right: 16rpx;
		}
	}
	.scroll-item {
		/deep/ .u-col {
			// margin-left: 11rpx !important;
			// margin-right: 23rpx !important;
			margin-bottom: 32rpx !important;
			margin-top: 5rpx !important;
		}

	}

	.shouye-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 220rpx;
		align-items: center;
	}
	.home_main{
		width: 686rpx;
		height: 164rpx;
		margin-bottom: 32rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}

	.search {
		margin: 0 32rpx 30rpx 32rpx;
		/deep/ .u-content{
			border-radius: 36rpx !important;
		}
		/deep/.uicon-search{
			font-size: 48rpx !important;
			top: -1px !important;
		}
	}

	.title_bg {
		width: 36rpx;
		height: 10rpx;
		background: #0091D7;
		// margin-left: 80rpx;
		// margin-top: 23rpx;
		position: absolute;
		margin-left: 58rpx;
	}
	.server-item{
		display: flex;
	}
	.server-item-img{
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.server-item-right{
		display: flex;
		flex-direction: column;
		width: 462rpx;
		padding: 0 16rpx;
	}
	.server-item-right-name{
		font-size: 30rpx;
	}
	.server-item-right-center{
		display: -webkit-box;
		color: #999;
		font-size: 26rpx;
	}
	.split{
		width: 1rpx;
		height: 20rpx;
		background-color: #CCCCCC;
		margin: 10rpx;
	}
	.server-item-right-desc{
		color: #999;
		font-size: 26rpx;
		
	}
	.one-line{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.server-item-right-bottom{
		display: flex;
		justify-content: space-between;
	}
	.server-price-box{
		display: flex;
	}
	.price-unit{
		color: #FA3434;
		font-size: 26rpx;
		font-weight: 600;
	}
	.server-price{
		color: #FA3434;
		font-size: 34rpx;
		font-weight: 600;
	}
</style>